<template>
    <div class="forgot auth">
        <div class="content">
            <h2>重置密码</h2>
            <!-- 邮箱输入框，附带发送验证码按钮 -->
            <el-input v-model="user.email" placeholder="请输入邮箱" clearable class="user-input">
                <template #append>
                    <el-button>点击发送验证码</el-button>
                </template>
            </el-input>
            <!-- 验证码输入框 -->
            <el-input v-model="user.email" placeholder="请输入验证码" clearable class="user-input" />
            <!-- 新密码输入框 -->
            <el-input v-model="user.password" placeholder="请输入密码" clearable show-password class="user-input" />
            <!-- 重置按钮 -->
            <el-button class="user-input" @click="forgot">重置</el-button>
        </div>
    </div>
</template>

<script setup>
// 引入样式
import '@/assets/auth.css'
// 引入 Element Plus 组件
import { ElInput, ElButton, ElMessage } from 'element-plus'
// 引入 Vue 的响应式和路由
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 绑定输入框的数据
let user = ref({
    email: '',      // 用户邮箱
    password: ''    // 新密码
})

// 点击重置按钮的方法
function forgot() {
    // 这里可以添加表单校验和重置密码的逻辑
    // ElMessage.error('Oops, this is a error message.') // 登录失败的提示
    // ElMessage({ message: 'Congrats, this is a success message.', type: 'success' }) // 登录成功的提示
    router.push({
        path: '/login' // 重置成功后跳转到登录
    })
}
</script>